<template>
	<div class="mine_star_attestation">
		<!--头部begin-->
		<div class="star_head">
			<router-link to="../mine/"><i class="star_head_down"></i></router-link>
			<span class="star_head_str">明星认证</span>
		</div>
		<!--头部end-->
		<div class="star_container">
			<!--姓名信息begin-->
			<div class="star_mes">
				<div class="name">
					<input type="text" placeholder="请输入您的真实姓名" />
					<span>必填</span>
				</div>
				<div class="phone">
					<input type="text" placeholder="请输入联系方式" />
					<span>必填</span>
				</div>
			</div>
			<!--引入上传图片插件begin-->
			<div class="upload_photo">
				<p>请上传如左图所示的照片</p>
		    <div class="demo-upload-list" v-for="item in uploadList">
		        <template v-if="item.status === 'finished'">
		            <img :src="item.url">
		            <div class="demo-upload-list-cover">
		                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
		                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
		            </div>
		        </template>
		        <template v-else>
		            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
		        </template>
		    </div>
		    <Upload
		        ref="upload"
		        :show-upload-list="false"
		        :default-file-list="defaultList"
		        :on-success="handleSuccess"
		        :format="['jpg','jpeg','png']"
		        :max-size="2048"
		        :on-format-error="handleFormatError"
		        :on-exceeded-size="handleMaxSize"
		        :before-upload="handleBeforeUpload"
		        multiple
		        type="drag"
		        action="//jsonplaceholder.typicode.com/posts/"
		        style="display: inline-block;">
		        <div class="camera">
		        	<!--<img src="../../../static/images/49-50/s-2.png"/>-->
		        </div>
		    </Upload>
		    <Modal title="查看图片" v-model="visible">
		        <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
		    </Modal>
			</div>
			<!--引入上传图片插件end-->
			<!--上传图片begin-->
			<!--<div class="upload_photo">
				<p>请上传如左图所示的照片</p>
				<div class="photo">
					<img src="../../../static/images/49-50/示例照片.png"/>
				</div>
				<div class="uploading">
					<span>上传照片必填</span>
				</div>
			</div>-->
			<!--饰演信息begin-->
			<div class="play">
				<p class="explain">请填写您参演过的据/栏目名称及饰演角色</p>
				<p class="explain">至少添加一项，可以添加多个</p>
				<div class="already clearfix">
					<div class="name">来自放上的你</div>
					<div class="role">房梁仙子</div>
					<div class="remove"></div>
				</div>
				<div class="now clearfix">
					<div class="name"><input type="text" placeholder="剧/栏目名称"/></div>
					<div class="role"><input type="text" placeholder="饰演角色"/></div>
				</div>
				<div class="add">添加一条新的</div>
			</div>
			<!--提交begin-->
			<div class="submit">
				<p>点击提交表示同意<a href="#">保密协议</a></p>
				<router-link to="../mine/"><div class="btn">提交</div></router-link>
			</div>
		</div>
	</div>
</template>

<script>
	   export default {
        data () {
            return {
            	//图片
                defaultList: [
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
                imgName: '',
                visible: false,
                uploadList: []
            }
        },
        methods: {
			//图片上传组件
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                // 从 upload 实例删除数据
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                // 因为上传过程为实例，这里模拟添加 url
                
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                }
                return check;
            }
        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        }
    }
	
</script>

<style scoped lang="less">
.mine_star_attestation{
    background: #A54BE8;
    .star_head{
        width:640/64rem;
        margin:0 auto;
        height:130/64rem;
        text-align:center;
        padding-top:68/64rem;
        box-sizing: border-box;
        background: #A54BE8;
        .star_head_str{
            font-size:36/64rem;
            color:#fff;
            display: inline-block;
            margin-left: -55/64rem;
            margin-top: 0/64rem;
        }
        .star_head_down{
            
            float:left;
            display:inline-block;
            background: url(../../../static/images/4/f-1.png) no-repeat;
            background-size:100% 100%;
            width:20/64rem;
            height:35/64rem;
            line-height:35/64rem;
            margin-left: 18/64rem;
        }
    }
}
.star_container{
    background: #f2eef9;
    padding: 20/64rem;
    .star_mes{
        padding: 20/64rem 0;
        .name,.phone{
            background: url(../../../static/images/49-50/输入框-长-1.png) no-repeat center 5/64rem;
            background-size: 100% 100% ;
            width:600/64rem ;
            height:89/64rem ;
            line-height: 89/64rem;
            font-size: 26/64rem;
            padding: 0 18/64rem;
            color:#a9a2b4 ;
            box-sizing: border-box;
            border: 1px solid rgba(0,0,0,0);
            input{
                outline: none;
                border: 0;
                width:450/64rem ;
                height:80/64rem ;
            }
            span:last-child{
                color: #a54be8;
                float: right;
                margin-right: 18/64rem;
            }
        }
        .name{
            margin-bottom: 26/64rem;
        }
        
    }
    .upload_photo{
        width: 100%;
        height: 370/64rem;
        border: 1px solid rgba(0,0,0,0);
        background: url(../../../static/images/49-50/上传照片大底.png) no-repeat;
        background-size: 100% 100%;
        p{
            color: #313131;
            font-size: 28/64rem;
            margin: 24/64rem 0 26/64rem 18/64rem;
        }
/*//      .photo{
//          float: left;
//          text-align: center;
//          width: 180/64rem;
//          height: 250/64rem;
//          background: url(../../../static/images/49-50/照片边框.png) no-repeat 62/64rem;
//          background-size: 100% 100%;
//          margin-left: 62/64rem;
//          img{
//               width: 180/64rem;
//               height: 250/64rem;
//          }
//      }
//      .uploading{
//          float: left;
//          background: url(../../../static/images/49-50/s-2.png) no-repeat;
//          background-size: 100% 100%;
//          margin-left: 114/64rem;
//          width: 180/64rem;
//          height: 250/64rem;
//          span{
//              color: #a54be8;
//              font-size: 26/64rem;
//              display: inline-block;
//              width: 105/64rem;
//              text-align: center;
//              margin-left: 37/64rem;
//              padding-top: 150/64rem;
//          }
//      }*/
    }
    .play{
        margin-top: 20/64rem;
        padding-top: 22/64rem;
        border-top: 1px solid #d7d2e0;
        min-height: 545/64rem;
        .explain{
            color:#313131 ;
            font-size: 28/64rem;
        }
        .explain:nth-child(2){
            color: #a54be8;
        }
        .already{
            color: #313131;
            padding-top: 24/64rem;
            .name,.role{
                float: left;
                background: url(../../../static/images/49-50/输入框-短-2.png) no-repeat -1/64rem ;
                background-size: 100% 100%;
                font-size: 28/64rem;                
                height: 91/64rem;
                line-height:91/64rem ;
                padding-left: 18/64rem;
                box-sizing: border-box;
            }
            .name{
                width: 330/64rem;
            }
            .role{
                margin-left: 10/64rem;
                width: 169/64rem;
            }
            .remove{
                float: right;
                background: url(../../../static/images/49-50/j-1.png);
                background-size: 100% 100%;
                margin-right: 16/64rem;
                width: 46/64rem;
                height: 46/64rem;
                margin-top: 17/64rem;
            }
        }
        .now{
            color: #a9a2b4;
            padding: 20/64rem 0;
            .name,.role{
                float: left;
                background: url(../../../static/images/49-50/输入框-中-1.png) no-repeat center 5/64rem;
                background-size: 100% 100%;
                font-size: 28/64rem;                
                height: 91/64rem;
                line-height:91/64rem ;
                padding-left: 18/64rem;
                box-sizing: border-box;
            }
            .name{
                width: 378/64rem;
                input{
                    outline: none;
                    border: 0;
                    width:350/64rem ;
                    height:80/64rem ;
                }
            }
            .role{
                margin-left: 10/64rem;
                width: 209/64rem;
                input{
                    outline: none;
                    border: 0;
                    width:180/64rem ;
                    height:80/64rem ;
                }
            }
        }
        .add{
            background: url(../../../static/images/49-50/t-1.png) no-repeat;
            background-size: 600/64rem 100%;
            width: 600/64rem;
            height:91/64rem ;
            line-height: 91/64rem;
            font-size: 28/64rem;
            color: #a9a2b4;
            text-align: center;
            padding-left: 17/64rem;
        }
    }
    .submit{
        color: #a9a2b4;
        font-size: 28/64rem;
        text-align: center;
        a{
            color: #a54be8;
            text-decoration: underline;
        }
        .btn{
            background: url(../../../static/images/49-50/按钮-2.png) no-repeat;
            background-size: 600/64rem 100%;
            width: 600/64rem;
            height: 90/64rem;
            margin: 66/64rem 0 10/64rem 0;
            color: #FFFFFF;
            font-size: 36/64rem;
            line-height: 90/64rem;
        }
    }
}

 
   //上传图片样式
 .demo-upload-list{
       margin: 0 26/64rem 18/64rem;
        display: inline-block;
        width: 180/64rem;
        height: 250/64rem;
        text-align: center;
        line-height: 250px/64rem;
        border: 1px solid transparent;
        border-radius: 4/64rem;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 105/64rem;
        margin-left: 62/64rem;
        vertical-align: top;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20/64rem;
        cursor: pointer;
        margin: 0 2/64rem;
    }
    .camera{
        background: url(../../../static/images/49-50/s-2.png) no-repeat;
        background-size: 100% 100%;
        width: 180/64rem;
        height: 250/64rem;
        
    }
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body,
p,
ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

input,
textarea,
select {
	padding: 0;
	border: 1px solid #ccc;
	outline: 0;
	font-size: 100%;
}

i {
	font-style: normal;
}

b {
	font-weight: normal;
}

ul,
ol {
	padding-left: 0;
	list-style: none;
}

a {
	text-decoration: none;
}

a,
img {
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.wrap{
	width: 1000px;
	margin: 0 auto;
}
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
}
body{
	font-family: "微软雅黑";
}
</style>